import logo from './logo.svg';
import './App.css';
import React from 'react';


class Bpp extends React.Component{
  
  //componentWillUnmount 组件卸载时执行
  componentWillUnmount(){
    console.log('组件卸载');
  }
  render(){
    return <div>我是Bpp</div>
  }
}

class App extends React.Component{
  constructor(props){
    super(props)
    console.log('我是constructor');
    this.state={
      bpp:true
    }
  }

  static getDerivedStateFromProps(props,state){
    console.log('getDerivedStateFromProps 函数执行');
return null
  }
  // 组件挂载完成之后执行 钩子
  componentDidMount(){
    console.log('componentDidMount 组件挂载完成');
  }
// 只在更新的时候执行 
  getSnapshotBeforeUpdate(prevProps,prevState){
    console.log(prevProps,'prevProps');//
    console.log(prevState,'prevState');//之前的 State。
    console.log('getSnapshotBeforeUpdate执行了');
    return null
  }

  // 更新之后
  componentDidUpdate(prevProps,prevState,snapshot){
    console.log(snapshot,'snapshot');//snapshot这个参数是getSnapshotBeforeUpdate返回的参数
  }
  click=()=>{
    // 修改状态
    this.setState({
      bpp:false
    })
  }
  render(){
    console.log('函数执行');
    const {bpp}=this.state
    return (
      <div>
{ bpp&&<Bpp/>}

<button onClick={this.click}>更新</button>
      </div>
    
    )
  }

}

export default App;
